<template>
  <div v-infinite-scroll="getData" class="item-wrapper">
    <div class="card-item">
      <card
        v-for="item in cardData.data"
        :id="item.id"
        :key="item.id"
        :favorite="item.favorite"
        :url="item.image"
        :user-info="{
          name: item.user.name,
          avatar: item.user.avatar,
        }"
        :title="item.title"
      ></card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import card from '@components/card/card.vue';
import { useApi } from '@core/http/api-instance';
import { GetNoteListRes } from '@core/http/apis/note/models/GetNoteListRes';

// 查询条件
const searchTerms = reactive({
  term: '',
  pageIndex: 1,
  pageSize: 10,
});

// 拿到api
const api = useApi();
const cardData = reactive<{
  data: GetNoteListRes[];
  count: number;
}>({
  data: [],
  count: 0,
});

// func
const getData = async () => {
  try {
    const resData = await api.note.getNoteList(
      searchTerms.pageIndex,
      searchTerms.pageSize,
      searchTerms.term,
    );
    if (resData.data.length) {
      searchTerms.pageIndex++;
      cardData.data = cardData.data.concat(resData.data);
      cardData.count = resData.count;
    }
  } catch (e) {
    console.warn(e instanceof Error && e.message);
  }
};
</script>

<style lang="scss" scoped>
@import '@assets/css/basic-page.scss';
</style>
